<template>
    <div class="page" v-loading.fullscreen.lock="loading" element-loading-text="正在取消中···">
        <div style="height: 98px;"></div>
        <!-- .fullscreen.lock  v-loading="loading" element-loading-text="正在取消中···"-->
        <div v-if="loadingss" class="loading-overlay">
            <i class="el-icon-loading"></i>
            <span>{{ loadingssText }}</span>
        </div>
        <!-- <div v-if="loadings" v-loading="loadings" style="width: 100%;height: 100%"></div> -->
        <div class="orderPage" v-loading="loadings">
            <div class="left-fixed" @scroll="handleScroll">
                <div :class="[`orderPage-left`, { 'collapsed': !leftShow }]">
                    <div :class="['orderPage-left-head', , { 'collapsed': !leftShow }]">
                        <div class="head-title">
                            <div>任务列表</div>
                            <div class="reset">
                                <!-- <div v-if="leftShow" @click="resetData"><i class="el-icon-refresh-left"></i>刷新</div> -->
                                <div @click="setWidth" v-if="leftShow"
                                    style="display: flex; align-items: center; margin-left: 10px;"><i
                                        style="font-size: 22px;" class="el-icon-s-fold"></i></div>
                                <div @click="setWidthTwo" v-if="!leftShow"
                                    style="display: flex; align-items: center; margin-left: 10px;"><i
                                        style="font-size: 22px;" class="el-icon-s-unfold"></i></div>
                            </div>
                        </div>
                        <div class="title_width" v-if="leftShow">
                            <!-- <div class="head-type-item" @click="statusAll(10)">待接单·{{ otherStatus.pending_orders_total }}
                        </div>
                        <div class="head-type-item head-type-item-orange" @click="statusAll(20)">进行中·{{
                            otherStatus.in_progress_total }}</div>
                        <div class="head-type-item head-type-item-green" @click="statusAll(30)">待确认完成·{{
                            otherStatus.un_complete_total }}</div> -->
                            <el-form :inline="true" :model="formInline" size="mini" class="demo-form-inline">
                                <el-row class="row_margin">
                                    <el-col :span="8">
                                        <el-form-item>
                                            <div style="display: flex;">
                                                <span class="input_text">发布企业</span>
                                                <el-select clearable filterable style="flex: 1;"
                                                    v-model="formInline.group_id" placeholder="请选择企业">
                                                    <el-option v-for="(item, index) of group_id_list" :key="index"
                                                        :label="item.group_name" :value="item.group_id"></el-option>
                                                </el-select>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="7">
                                        <el-form-item>
                                            <div style="display: flex;">
                                                <span class="input_text">任务状态</span>
                                                <el-select clearable filterable style="flex: 1;"
                                                    v-model="formInline.status_id" placeholder="请选择">
                                                    <el-option v-for="(item, index) of status_list" :key="index"
                                                        :label="item.name" :value="item.value"></el-option>
                                                </el-select>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item>
                                            <div style="display: flex;">
                                                <span class="input_text">提单号</span>
                                                <el-input clearable style="flex: 1;" v-model="formInline.orderNum"
                                                    placeholder="提单号"></el-input>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="3">
                                        <el-form-item>
                                            <el-button type="primary" @click="debouncedOnSubmit">搜索</el-button>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </div>
                    </div>
                    <!-- <div class="halvingLine"></div> -->
                    <div class="orderPage-left-content" v-if="leftShow">
                        <div style="height: 105px"></div>
                        <!-- <div :class="item.status == 0 ? 'left-content-head' : (index == optionStyle ? 'orderPage-left-item-all' : 'orderPage-left-item')"
                            @click="chooseBox(item, index)" v-for="(item, index) of orderData" :key="index"> -->
                        <!-- <div :class="item.status == 0
                            ? 'left-content-head'
                            : (index == optionStyle
                                ? 'orderPage-left-item-all'
                                : (item.remainder ? 'orderPage-left-item-warning' : 'orderPage-left-item'))"
                            @click="chooseBox(item, index)" v-for="(item, index) of orderData" :key="index"> -->
                        <div :class="{
                            'left-content-head': item.status == 0,
                            'orderPage-left-item-all-warning': item.remainder !== '' && index == optionStyle && item.status != 0,
                            'orderPage-left-item-all': item.remainder === '' && index == optionStyle && item.status != 0,
                            'orderPage-left-item': item.remainder === '' && index !== optionStyle && item.status != 0,
                            'orderPage-left-item-warning': item.remainder !== '' && index !== optionStyle && item.status != 0
                        }" @click="chooseBox(item, index)" v-for="(item, index) in orderData" :key="index">
                            <div class="head-types" v-if="item.status != 0">
                                <div class="head-type clear-margin">
                                    <div class="head-type-item" v-if="item.status_list.pending_orders != 0">待接单·{{
                                        item.status_list.pending_orders }}</div>
                                    <div class="head-type-item head-type-item-orange"
                                        v-if="item.status_list.in_progress != 0">
                                        进行中·{{ item.status_list.in_progress }}</div>
                                    <div class="head-type-item head-type-item-green"
                                        v-if="item.status_list.un_complete != 0">
                                        待货主确认·{{ item.status_list.un_complete }}
                                    </div>
                                    <div class="head-type-item head-type-item-green"
                                        v-if="item.status_list.driver_un_complete != 0">
                                        待司机收款·{{ item.status_list.driver_un_complete }}
                                    </div>
                                    <div class="head-type-item head-type-item-gray"
                                        v-if="item.status_list.complete != 0">
                                        已确认完成·{{ item.status_list.complete }}</div>
                                </div>
                                <div>
                                    <el-dropdown trigger="click" @command="(command) => updataTask(item, command)">
                                        <i class="el-icon-more"></i>
                                        <el-dropdown-menu slot="dropdown">
                                            <!-- :disabled="item.status_list.un_complete + item.status_list.in_progress + item.status_list.complete > 0" -->
                                            <el-dropdown-item command="r" icon="el-icon-refresh">刷新</el-dropdown-item>
                                            <el-dropdown-item command="a"
                                                icon="el-icon-edit-outline">修改</el-dropdown-item>
                                            <el-dropdown-item icon="el-icon-delete" command="b">删除</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </div>
                            </div>

                            <div class="group_name">
                                提单号: <span class="time-text" style="margin-right: 12px;">{{ item.bill_lading_number
                                }}</span>
                                <el-tag v-if="item.type == 0" style="font-size: 11px;" size="mini"
                                    type="success">货主</el-tag>
                                <el-tag v-else style="font-size: 11px;" size="mini" type="warning">平台</el-tag>
                            </div>
                            <div class="group_name">{{ item.group_name }}</div>

                            <div class="item-all-address">
                                <div class="address-left" v-if="item.container_list.length > 0">
                                    <span class="station_name_item">{{ item.station_name }}</span>
                                    <div class="arrows">
                                        <!-- v-for="(box_type, index) of item.container_list"
                                            :key="index" -->
                                        <div class="address-type">
                                            <span>{{ item.container_list[0].container_name }}*{{
                                                item.container_list[0].number }}</span><span
                                                v-if="item.container_list.length > 1">(+{{ item.container_list.length -
                                                    1
                                                }})</span>
                                        </div>
                                        <img src="../../assets/image/awrros.svg" alt="">
                                    </div>
                                    <span v-if="item.area_list.length == 1" :key="index">{{ item.area_list[0] }}</span>
                                    <span v-if="item.area_list.length > 1" :key="index">{{ item.area_list[0] }}(+{{
                                        item.area_list.length - 1 }})</span>
                                    <div class="export-import">{{ item.business_type }}</div>


                                    <div class="time-right time-left-two">
                                        发布时间: <span class="time-text">{{ item.add_time }}</span>
                                    </div>

                                </div>
                                <div v-if="item.container_list.length == 0"></div>
                                <div v-if="item.status == 0" @click="noStop">
                                    <el-dropdown trigger="click" @command="(command) => updataTask(item, command)">
                                        <i class="el-icon-more"></i>
                                        <el-dropdown-menu slot="dropdown">
                                            <el-dropdown-item command="t"
                                                icon="el-icon-document-add">发布</el-dropdown-item>
                                            <el-dropdown-item command="a"
                                                icon="el-icon-edit-outline">修改</el-dropdown-item>
                                            <el-dropdown-item command="b" icon="el-icon-delete">删除</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </div>
                            </div>
                            <!-- <div class="item-all-time">
                                <div class="content-item-time">
                                    <div class="time-lefts">
                                        截单时间：<span class="time-text">{{
                                            item.cut_off_time || "-- --"
                                            }}</span>
                                    </div>
                                    <div class="time-right">
                                        截港时间：
                                        <span class="time-text">{{
                                            item.cut_off_port_time || "-- --"
                                            }}</span>
                                    </div>
                                </div>
                            </div> -->
                            <div class="item-apply" v-if="item.status == 0">待发布</div>
                            <div class="warningImg" v-if="item.remainder">
                                <img src="@/assets/image/listWarning.png" style="width: 90px; height: 90px;" alt="">
                            </div>
                        </div>
                        <div v-if="orderData.length == 0">
                            <div style="display: flex; justify-content: center; margin-top: 100px;">
                                <div style="display: flex; flex-direction: column; align-items: center;">
                                    <img style="width: 250px; height: 200px;" src="@/assets/image/no_data_img.png"
                                        alt="">
                                    <span style="color: #666;font-size: 14px;">暂无数据</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-if="!hasMore && orderData.length > 0" class="load-more-tip">没有更多数据了</div>
                </div>
            </div>
            <div :class="leftShow ? 'orderPage-right' : 'orderPage-right_two'">
                <orderDetail ref="child" @call-parent-method="parentMethod" @call-parent-two="parentMethodTwo"
                    :taskId="taskId" :taskType="taskType" @openLoading="isLoading" @openLoadingTwo="otherLoading">
                </orderDetail>
            </div>
        </div>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
            <span>该订单暂未发布，您可进行以下操作：</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="delTask">删除</el-button>
                <el-button type="primary" @click="setTask">修改</el-button>
                <el-button type="primary" @click="pushTask">发布</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>
import { taskList, taskDel, baseData, setTaskModify, orderPublish, changeTask } from '@/api/api'
import orderDetail from './components/orderDetail.vue';
import { debounce } from '../../utils/debounce';
export default {
    data () {
        return {
            group_id_list: [],
            status_list: [],
            orderData: [],
            optionStyle: null,
            otherStatus: {},
            taskId: '',
            taskType: '',
            formInline: {
                group_id: '',
                status_id: '',
                orderNum: ''
            },
            loading: false,
            loadings: false,
            loadingss: false,
            // 列表展开隐藏
            leftShow: false,
            currentPage: 1, // 当前页码
            pageSize: 30,   // 每页数量
            isLoadingMore: false, // 加载中状态
            hasMore: true,       // 是否还有更多数据
            isNext: true,
            // 传递的id
            detailId: '',
            dialogVisible: false,
        }
    },
    components: {
        orderDetail
    },
    created () {
        // this.getTaskData()
        // this.getBaseData()
        this.debouncedOnSubmit = debounce(this.onSubmit, 300);
    },
    mounted () {

        if (this.$route.query.id) {
            this.detailId = this.$route.query.id
            this.formInline.orderNum = this.$route.query.bill_lading_number
            const taskId = this.$route.query.id
            this.loadFirstPage(taskId);
        } else {
            this.loadFirstPage();
        }

        this.getBaseData();

        // 通过遮罩层关闭图片预览
        document.addEventListener('click', function (e) {
            if (e.target.className == "el-image-viewer__mask") {
                let close = document.querySelector(".el-icon-circle-close");
                close.click();
            }
        });


    },
    methods: {
        // 初始化调用
        async loadFirstPage (id) {
            this.isLoadingMore = true;
            this.loadings = true;
            const data = await this.getTaskData(1);
            this.orderData = data;
            this.chooseBox(id)
            this.isLoadingMore = false;
            this.loadings = false;
        },

        async getTaskData (page = 1) {
            const formData = new FormData();
            formData.append('page', page);
            formData.append('id', this.detailId);
            formData.append('limit', this.pageSize);
            formData.append('status', this.formInline.status_id);
            formData.append('bill_lading_number', this.formInline.orderNum);
            formData.append('group_id', this.formInline.group_id);

            try {
                const res = await taskList(formData);
                if (res.status === 200) {

                    const data = res.data.data || [];
                    // 补充空数据判断
                    if (page === 1 && data.length < this.pageSize) {
                        this.isNext = false;
                    } else {
                        this.isNext = true;
                    }
                    return data;
                }
                return [];
            } catch (error) {
                console.error("请求失败:", error);
                this.loadings = false;
                return [];
            }
        },

        // 下拉触底
        handleScroll (event) {
            // console.log(event, '1111111110');

            if (this.isLoadingMore || !this.hasMore || !this.isNext) return; // 增加状态拦截

            const container = event.target;
            const { scrollTop, scrollHeight, clientHeight } = container;
            const threshold = 50; // 缓冲距离

            if (scrollHeight - (scrollTop + clientHeight) <= threshold) {
                this.loadNextPage();
            }
        },
        async loadNextPage () {
            this.isLoadingMore = true;
            try {
                const nextPage = this.currentPage + 1; // 先计算下一页
                const newData = await this.getTaskData(nextPage);

                if (newData.length === 0 || newData.length < this.pageSize) {
                    this.hasMore = false;
                }

                if (newData.length > 0) {
                    this.orderData = [...this.orderData, ...newData];
                    this.currentPage = nextPage; // 成功后再更新页码
                }
            } catch (error) {
                console.error("加载失败:", error);
            } finally {
                this.isLoadingMore = false;
            }
        },

        // 搜索
        async onSubmit () {
            // 重置所有状态
            this.detailId = ""
            this.currentPage = 1;
            this.hasMore = true;
            this.isLoadingMore = true; // 锁定防止滚动触发
            // this.orderData = []; // 清空旧数据

            // 加载第一页
            const data = await this.getTaskData(1);
            this.orderData = data;
            this.hasMore = true;
            this.isLoadingMore = false;

            this.chooseBox();
        },

        isLoading (value) {
            if (value === 1) {
                this.loadings = true
            } else {
                this.loadings = false
            }
        },
        otherLoading (value) {
            if (value === 1) {
                this.loadingss = true
            } else {
                this.loadingss = false
            }
        },
        async parentMethod (id) {
            // this.getTaskData()
            // this.loading = false
            if (id == 'a') {
                await this.getTaskData(1);
                this.chooseBox()
            } else {
                try {
                    this.loading = false

                    // 1. 找到被发布任务的位置
                    const publishedIndex = this.orderData.findIndex(item => item.id === id);
                    if (publishedIndex === -1) return;

                    // 2. 计算所在页数
                    const pageSize = this.pageSize;
                    const publishedPage = Math.ceil((publishedIndex + 1) / pageSize);

                    // 3. 重新加载当前页数据
                    const newPageData = await this.getTaskData(publishedPage);

                    // 4. 替换当前页数据
                    const startIndex = (publishedPage - 1) * pageSize;
                    this.orderData.splice(startIndex, pageSize, ...newPageData);
                    this.chooseBox(id)
                } catch (err) {
                    this.loading = false
                    this.loadingss = false;
                    this.loadingssText = "加载中，请稍候...";
                    console.error("发布失败:", err);
                }
            }
        },
        parentMethodTwo () {
            this.loading = true
        },

        // 模态框删除
        delTask () {
            this.dialogVisible = false
            let id = this.itemTask.id
            // 调用删除接口
            this.delData(id);
        },
        // 模态框修改
        setTask () {
            this.dialogVisible = false
            let id = this.itemTask.id
            // 跳转发布页面进行修改
            this.$router.push({
                path: "/sendPage",
                query: {
                    id: id,
                    type: "",
                },
            });
        },
        // 模态框发布
        pushTask () {
            this.dialogVisible = false
            let id = this.itemTask.id
            this.$confirm('确定要发布此任务吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(() => {
                // 调用发布接口
                this.taskPush(id)
            }).catch(() => {

            });
        },
        chooseBox (item, index) {
            if (typeof index === 'number') {
                this.itemTask = item
                this.optionStyle = index;

                // console.log('我是审核中数据');

                if (item.status == 0) {
                    this.taskType = "0";

                    this.dialogVisible = true
                } else {
                    this.taskType = "1";
                    this.taskId = String(item.id);
                }
            } else if (typeof item === 'number') {
                this.orderData.forEach((items, index) => {
                    if (item == items.id) {
                        this.itemTask = items
                        this.optionStyle = index;
                        this.taskId = String(this.orderData[index].id);
                        this.taskType = "1";
                    }
                });
            } else {
                // this.orderData.forEach((item, index) => {
                // });
                if (this.orderData.length == 0) {
                    this.taskId = 'noData';
                    this.taskType = "1";
                } else {
                    for (let index = 0; index < this.orderData.length; index++) {
                        if (this.orderData[index].status != 0) {
                            // console.log('11111111111111111');
                            this.itemTask = this.orderData[index]
                            this.optionStyle = index;
                            this.taskId = String(this.orderData[index].id);
                            this.taskType = "1";
                            return

                        }

                    }
                }
            }
        },
        // 重置
        resetData () {
            this.taskId = ''
            this.optionStyle = null
            this.formInline.status_id = 0
            this.formInline.group_id = ''
            this.formInline.orderNum = ''
            this.getTaskData()
            // this.$refs.child.getOrderStatus(2);
        },
        //展开收起左侧列表
        setWidth () {
            this.leftShow = false
        },
        setWidthTwo () {
            this.leftShow = true
        },
        // 状态筛选
        // statusAll (status) {
        //     const formData = new FormData()
        //     formData.append('status', status)
        //     this.$refs.child.getOrderStatus(formData);
        // },
        // 修改
        updataTask (item, command) {
            // command.stopPropagation();
            const statusCount = item.status_list.driver_un_complete + item.status_list.un_complete + item.status_list.in_progress + item.status_list.complete;
            let id = item.id
            if (command == "t") {
                this.$confirm('确定要发布此任务吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    // 调用发布接口
                    this.taskPush(id)
                }).catch(() => {

                });
            } else if (command == "r") {
                this.$refs.child.getTaskDatile();

            } else if (command == 'a' && statusCount > 0) {
                this.$alert('抱歉此任务不能修改，如有问题请联系客服', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                    }
                });
            } else if (command == 'b' && statusCount > 0) {
                this.$alert('抱歉此任务不能删除，如有问题请联系客服', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                    }
                });
            } else if (command == 'a' && item.status == 0) {
                // 跳转发布页面进行修改
                this.$router.push({
                    path: '/sendPage',
                    query: {
                        id: item.id,
                        flag: 0,
                    }
                })
            } else if (command == 'a' && item.status == 10) {
                // 跳转发布页面进行修改
                // this.$router.push({
                //     path: '/sendPage',
                //     query: {
                //         id: item.id,
                //         status: item.status,
                //         flag: 1
                //     }
                // })
                const formData = new FormData()
                formData.append('id', id)
                setTaskModify(formData).then(res => {
                    if (res.status == 200) {
                        this.$confirm('此操作任务会临时下架，确认修改？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            // 调用临时下架接口
                            this.temporaryTask(id)
                        }).catch(() => {

                        });
                    }
                })
            } else if (command == 'b' && statusCount == 0) {
                // 调用删除接口
                this.delData(item.id)
            }
        },
        // 阻止事件冒泡
        noStop (e) {
            e.stopPropagation();
        },
        // 发布
        async taskPush (id) {
            const formData = new FormData();
            formData.append("id", id);
            this.loadingssText = "正在发布任务";
            this.loadingss = true;

            try {
                const res = await orderPublish(formData);
                if (res.status === 200) {
                    setTimeout(async () => {
                        // 1. 找到被发布任务的位置
                        const publishedIndex = this.orderData.findIndex(item => item.id === id);
                        if (publishedIndex === -1) return;

                        // 2. 计算所在页数
                        const pageSize = this.pageSize;
                        const publishedPage = Math.ceil((publishedIndex + 1) / pageSize);

                        // 3. 重新加载当前页数据
                        const newPageData = await this.getTaskData(publishedPage);

                        // 4. 替换当前页数据
                        const startIndex = (publishedPage - 1) * pageSize;
                        this.orderData.splice(startIndex, pageSize, ...newPageData);
                        this.chooseBox()
                        this.$message.success(res.msg);
                        this.loadingss = false;
                        this.loadingssText = "加载中，请稍候...";
                    }, 4000);
                }
            } catch (err) {
                this.loadingss = false;
                this.loadingssText = "加载中，请稍候...";
                console.error("发布失败:", err);
            }
        },
        // 临时下架
        temporaryTask (id) {
            const formData = new FormData()
            formData.append('id', id)
            changeTask(formData).then(res => {
                if (res.status == 200) {
                    this.$router.push({
                        path: '/sendPage',
                        query: {
                            id: id,
                            type: ''
                        }
                    })
                }
            })
        },
        // 删除
        async delData (id) {
            this.$confirm("此操作将删除该任务, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(async () => {
                try {
                    // 1. 调用删除接口
                    const formData = new FormData();
                    formData.append("id", id);
                    await taskDel(formData);

                    // 2. 计算被删除数据所在的页
                    const deletedIndex = this.orderData.findIndex(item => item.id === id);
                    if (deletedIndex === -1) return;

                    const pageSize = this.pageSize;
                    const deletedPage = Math.ceil((deletedIndex + 1) / pageSize);
                    this.orderData.splice(deletedIndex, 1);

                    // 3. 重新加载被删除数据所在页
                    const newPageData = await this.getTaskData(deletedPage);

                    // 4. 替换当前页数据
                    const startIndex = (deletedPage - 1) * pageSize;
                    this.orderData.splice(startIndex, pageSize, ...newPageData);

                    // 特殊处理：如果删除的是最后一页的最后一条
                    if (newPageData.length === 0 && deletedPage > 1) {
                        const prevPageData = await this.getTaskData(deletedPage - 1);
                        const prevStartIndex = (deletedPage - 2) * pageSize;
                        this.orderData.splice(prevStartIndex, pageSize, ...prevPageData);
                    }

                    this.chooseBox()

                    this.$message.success("删除成功");
                } catch (error) {
                    this.$message.error("删除失败");
                    console.error(error);
                }
            }).catch(() => {
                this.$message.info("已取消删除");
            });
        },
        // 修改
        editData () {

        },
        // 页面基础参数
        getBaseData () {
            baseData().then(res => {
                console.log(res);
                if (res.status == 200) {
                    this.group_id_list = res.data.group_id_list
                    this.status_list = res.data.status_list
                }
            })
        },

    },
}
</script>

<style scoped lang="scss">
.page {
    min-height: 100vh;
}

.orderPage {
    // padding-top: 98px;
    background-color: rgb(242, 243, 245);
    min-height: calc(100vh - 98px);
    display: flex;
    overflow-y: auto;
    // transform: scale(0.8)
    // transform-origin: 0 0;
    // height: 125%;
    // width: 125%;
    // transform: scale(0.8);
}

.orderPage-left {
    // width: 430px;
    width: 500px;
    // height: calc(100vh - 65px);
    background-color: #fff;
    padding: 0 16px;
    border-radius: 8px 0 0 0;
    margin-top: -1px;
    transition: width 0.3s ease;
    /* 添加过渡效果 */
}

.orderPage-left.collapsed {
    width: 130px;
    /* 缩小后的宽度 */
}

.head-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    color: rgb(29, 33, 41);

    .reset {
        color: rgb(22, 93, 255);
        font-weight: 400;
        font-size: 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
    }
}

.title_width {
    width: 100%;
}

.head-type {
    display: flex;
    align-items: center;
    margin-top: 12px;
}

.head-type-item {
    // width: 66px;
    padding: 0 8px;
    height: 20px;
    background-color: rgb(232, 247, 255);
    color: rgb(22, 93, 255);
    border-radius: 4px;
    font-weight: 400;
    font-size: 10px;
    margin-right: 8px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
}

.head-type-item-orange {
    background-color: rgb(255, 247, 232);
    color: rgb(255, 125, 0);
}

.head-type-item-green {
    background-color: rgb(230, 255, 236);
    color: rgb(0, 186, 115);
}

.head-type-item-gray {
    background-color: rgb(237, 239, 242);
    color: rgb(78, 89, 105);
}

.halvingLine {
    height: 1px;
    width: 100%;
    background-color: rgb(229, 230, 235);
    margin: 88px 0 16px;
}

.left-content-head {
    padding: 12px 16px;
    background-color: rgb(255, 247, 232);
    border-radius: 6px;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
}

.content-item-address {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.address-left {
    display: flex;
    align-items: center;
    color: rgb(78, 89, 105);
    font-size: 13px;
    font-weight: 500;
}

.address-type {
    color: rgb(134, 144, 156);
    font-size: 9px;
    font-weight: 400;
}

.export-import {
    width: 30px;
    height: 18px;
    border: 1px solid rgb(201, 205, 212);
    border-radius: 4px;
    box-sizing: border-box;
    margin-left: 8px;
    color: rgb(78, 89, 105);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    margin-right: 8px;
    text-align: center;
}

.arrows {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    height: 24px;
    margin: 0 8px 0 0;
}

.content-item-time {
    margin-top: 4px;
    display: flex;
    align-items: center;
}

.time-left {
    min-width: 70px;
    max-width: 110px;
    font-size: 11px;
    font-weight: 400;
    color: rgb(134, 144, 156);
    white-space: nowrap;
    /* 不换行 */
    overflow: hidden;
    /* 隐藏超出部分 */
    text-overflow: ellipsis;
    // margin-right: 15px;
}

.time-lefts {
    font-size: 11px;
    font-weight: 400;
    color: rgb(134, 144, 156);
    margin-right: 1px;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 165px;
}

.time-right {
    font-size: 11px;
    font-weight: 400;
    color: rgb(134, 144, 156);
}

.time-left-two {
    font-size: 11px;
    font-weight: 400;
    color: rgb(134, 144, 156);
    margin-left: 5px;
}

.time-text {
    color: rgb(78, 89, 105);
}

.item-apply {
    background-color: rgb(255, 125, 0);
    width: 52px;
    height: 16px;
    border-radius: 6px 0 15px 0;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 16px;
    text-align: center;
    color: #fff;
    font-weight: 400;
    font-size: 10px;
}

.orderPage-left-item-all {
    padding: 8px 10px;
    border: 1px solid rgb(22, 93, 255);
    border-radius: 6px;
    // box-shadow: 0 3 12 0 rgba(41, 46, 59, 0.12);
    box-shadow: 0px 3px 12px 0px rgba(41, 46, 59, 0.12);
    margin-bottom: 10px;
    box-sizing: border-box;
    cursor: pointer;
}

.orderPage-left-item-all-warning {
    position: relative;
    padding: 8px 10px;
    box-sizing: border-box;
    /* 红 */
    border: 1px solid rgb(245, 63, 63);
    border-radius: 6px;
    box-shadow: 0px 3px 12px 0px rgba(41, 46, 59, 0.12);
    background: linear-gradient(270.00deg, rgb(255, 248, 248), rgb(255, 236, 232) 100%);
    margin-bottom: 10px;
    cursor: pointer;
}

.head-types {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.clear-margin {
    margin: 0;
}

.item-all-address {
    position: relative;
    z-index: 11;
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.orderPage-left-item {
    padding: 8px 10px;
    background-color: rgb(247, 248, 250);
    box-shadow: 0px 3px 12px 0px rgba(41, 46, 59, 0.12);
    border-radius: 6px;
    margin-bottom: 12px;
    cursor: pointer;
}

.orderPage-left-item-warning {
    position: relative;
    padding: 8px 10px;
    margin-bottom: 12px;
    border-radius: 6px;
    box-shadow: 0px 3px 12px 0px rgba(41, 46, 59, 0.12);
    background: linear-gradient(270.00deg, rgb(255, 248, 248), rgb(255, 236, 232) 100%);
    box-sizing: border-box;
    cursor: pointer;
}

.orderPage-right {
    padding: 10px;
    flex: 1;
    // width: calc(100% - 500px);
    margin-left: 500px;
    // height: calc(100% - 64px);
    min-height: calc(100vh - 98px);
    overflow-y: auto;
    overflow-x: hidden;
    transition: all 0.3s ease;
}

.orderPage-right_two {
    padding: 10px;
    flex: 1;
    // width: calc(100% - 100px);
    margin-left: 130px;
    // height: calc(100% - 64px);
    min-height: calc(100vh - 98px);
    overflow-y: auto;
    overflow-x: hidden;
    transition: all 0.3s ease;
}

.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}

.el-icon-arrow-down {
    font-size: 12px;
}

.demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
}

// 左侧固定
.left-fixed {
    position: fixed;
    // width: 100%;
    overflow-y: auto !important;
    // height: calc(100vh - 65px);
    height: calc(100vh - 98px);
    background-color: #fff;
    // padding-top: 16px;
}

/* 自定义滚动条样式 */
.left-fixed::-webkit-scrollbar {
    width: 4px;
    /* 滚动条宽度 */
}

.left-fixed::-webkit-scrollbar-thumb {
    background-color: #ccc;
    /* 滚动条滑块颜色 */
    border-radius: 4px;
    /* 滚动条滑块圆角 */
}

.left-fixed::-webkit-scrollbar-thumb:hover {
    background-color: #999;
    /* 滚动条滑块悬停颜色 */
}

.left-fixed::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* 滚动条轨道颜色 */
}

.orderPage-left-head {
    margin-left: -16px;
    position: fixed;
    top: 98px;
    width: 500px;
    z-index: 1000;
    background-color: #fff;
    padding: 16px 16px 0;
    transition: width 0.3s ease;
    // padding-bottom: 16px;
    // padding: 16px;
}

.orderPage-left-head.collapsed {
    margin-left: -16px;
    position: fixed;
    top: 98px;
    z-index: 1000;
    background-color: #fff;
    padding: 16px 16px 0;
    width: 130px;
    /* 缩小后的宽度 */
}

::v-deep .el-form-item__label {
    font-size: 12px;
}

.input_text {
    font-size: 12px;
    color: #222;
    font-weight: 500;
    margin-right: 5px;
}

.row_margin {
    margin-top: 15px;
}

.station_name_item {
    display: inline-block;
    width: 80px;
    // text-align: center;
    white-space: nowrap;
    /* 不换行 */
    overflow: hidden;
    /* 隐藏超出部分 */
    text-overflow: ellipsis;
    /* 使用省略号表示超出部分 */
}

.group_name {
    font-size: 12px;
    margin-top: 8px;
    font-weight: 500;
    color: rgb(78, 89, 105);
}

.orderPage-left-content {}

.warningImg {
    position: absolute;
    top: 10px;
    right: 25px;
    z-index: 10;
}

.loading-overlay {
    position: fixed;
    /* 固定位置 */
    top: 55%;
    /* 垂直居中 */
    left: 60%;
    /* 水平居中 */
    transform: translate(-50%, -50%);
    /* 确保完全居中 */
    width: 100vw;
    /* 覆盖整个视窗宽度 */
    height: 100vh;
    /* 覆盖整个视窗高度 */
    display: flex;
    align-items: center;
    /* Flexbox 垂直居中 */
    justify-content: center;
    /* Flexbox 水平居中 */
    background-color: rgba(255, 255, 255, 0.8);
    /* 半透明背景 */
    color: #1890FF;
    /* 文字颜色 */
    font-size: 16px;
    /* 文字大小 */
    z-index: 20;
    /* 确保加载层在最上面 */
}

.load-more-tip {
    text-align: center;
    // padding: 10px;
    color: #999;
    font-size: 12px;
    margin-bottom: 10px;
}
</style>
